<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/app.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新消息通知</h1>
		</header>
		<div id="notice-vue" class="mui-scroll-wrapper mui-content">
			<div class="mui-scroll">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<span>消息内容</span>
						<p>消息标题</p>
						<p class="mui-pull-right">时间:2017-08-15</p>
					</li>
				</ul>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			var noticeVue = new Vue({
				el: "#notice-vue",
				data: {
					notices: []
				},
				methods: {
					loadNotices: function(size) {
						if(size == 0) {
							this.notices = [];
						}

						this.notices.push({
							id: "1",
							noticeTitle: "公司大门",
							noticeMsg: "1001",
							noticeDate: "2017-08-15 15:23"
						});
						this.notices.push({
							id: "2",
							noticeTitle: "公司大门",
							noticeMsg: "1001",
							noticeDate: "2017-08-15 15:23"
						});
					}
				}
			})

			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#notice-vue',
					down: {
						style: 'circle',
						height: 100,
						auto: true,
						contentdown: "下拉可以刷新",
						contentover: "释放立即刷新",
						contentrefresh: "正在刷新...",
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					noticeVue.loadNotices(0);
					mui('#notice-vue').pullRefresh().endPullupToRefresh((false));
					mui('#notice-vue').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1000);
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#notice-vue').pullRefresh().endPullupToRefresh((true)); //参数为true代表没有更多数据了。
					noticeVue.loadNotices(noticeVue.notices.length);
				}, 1000);
			}
		</script>
	</body>

</html>